<ng-template #inputTemplate>
  <input
    #inputElement
    autocomplete="off"
    class="apes-select-search__field"
    (compositionstart)="isComposing = true"
    (compositionend)="isComposing = false"
    (keydown)="onKeyDownInput($event)"
    [ngModel]="inputValue"
    (ngModelChange)="setInputValue($event)"
    [disabled]="apesDisabled">
</ng-template>

<ng-template
  cdkConnectedOverlay
  apesConnectedOverlay
  [cdkConnectedOverlayOrigin]="cdkOverlayOrigin"
  [cdkConnectedOverlayOpen]="apesOpen"
  [cdkConnectedOverlayHasBackdrop]="true"
  [cdkConnectedOverlayMinWidth]="apesDropdownMatchSelectWidth? null : triggerWidth"
  [cdkConnectedOverlayWidth]="apesDropdownMatchSelectWidth? triggerWidth : null"
  (backdropClick)="closeDropDown()"
  (detach)="closeDropDown()"
  (positionChange)="onPositionChange($event)">
  <div class="apes-select-dropdown apes-select-tree-dropdown"
       [@slideMotion]="apesOpen ? dropDownPosition : 'void'"
       [@.disabled]="noAnimation?.apesNoAnimation"
       [apesNoAnimation]="noAnimation?.apesNoAnimation"
       [class.apes-select-dropdown--single]="!apesMultiple"
       [class.apes-select-dropdown--multiple]="apesMultiple"
       [class.apes-select-dropdown-placement-bottomLeft]="dropDownPosition === 'bottom'"
       [class.apes-select-dropdown-placement-topLeft]="dropDownPosition === 'top'"
       [ngStyle]="apesDropdownStyle">
    <apes-tree
      #treeRef
      [hidden]="isNotFound"
      apesNoAnimation
      apesSelectMode
      [apesData]="apesNodes"
      [apesMultiple]="apesMultiple"
      [apesSearchValue]="inputValue"
      [apesHideUnMatched]="apesHideUnMatched"
      [apesShowIcon]="apesShowIcon"
      [apesCheckable]="apesCheckable"
      [apesAsyncData]="apesAsyncData"
      [apesShowExpand]="apesShowExpand"
      [apesShowLine]="apesShowLine"
      [apesExpandedIcon]="apesExpandedIcon"
      [apesExpandAll]="apesDefaultExpandAll"
      [apesExpandedKeys]="expandedKeys"
      [apesCheckedKeys]="apesCheckable ? value : []"
      [apesSelectedKeys]="!apesCheckable ? value : []"
      [apesTreeTemplate]="apesTreeTemplate"
      [apesCheckStrictly]="apesCheckStrictly"
      (apesExpandChange)="onExpandedKeysChange($event)"
      (apesClick)="apesTreeClick.emit($event)"
      (apesCheckedKeysChange)="updateSelectedNodes()"
      (apesSelectedKeysChange)="updateSelectedNodes()"
      (apesCheckBoxChange)="apesTreeCheckBoxChange.emit($event)"
      (apesSearchValueChange)="setSearchValues($event)">
    </apes-tree>
    <span *ngIf="apesNodes.length === 0 || isNotFound" class="apes-select-not-found">
      <apes-embed-empty [apesComponentName]="'tree-select'" [specificContent]="apesNotFoundContent"></apes-embed-empty>
    </span>
  </div>
</ng-template>

<div
  cdkOverlayOrigin
  class="apes-select-selection"
  [class.apes-select-selection--single]="!isMultiple"
  [class.apes-select-selection--multiple]="isMultiple"
  tabindex="0">
  <ng-container *ngIf="!isMultiple">
    <div class="apes-select-selection__rendered">
      <div
        *ngIf="apesPlaceHolder && selectedNodes.length === 0"
        [style.display]="placeHolderDisplay"
        class="apes-select-selection__placeholder">
        {{ apesPlaceHolder }}
      </div>

      <div
        *ngIf="selectedNodes.length === 1"
        class="apes-select-selection-selected-value"
        [attr.title]="apesDisplayWith(selectedNodes[0])"
        [ngStyle]="selectedValueDisplay">
        {{ apesDisplayWith(selectedNodes[0]) }}
      </div>

      <div
        *ngIf="apesShowSearch"
        [style.display]="searchDisplay"
        class="apes-select-search apes-select-search--inline">
        <div class="apes-select-search__field__wrap">
          <ng-template [ngTemplateOutlet]="inputTemplate"></ng-template>
          <span class="apes-select-search__field__mirror">{{inputValue}}&nbsp;</span>
        </div>
      </div>

    </div>
  </ng-container>
  <ng-container *ngIf="isMultiple">
    <ul class="apes-select-selection__rendered">
      <div
        *ngIf="apesPlaceHolder && selectedNodes.length === 0"
        [style.display]="placeHolderDisplay"
        class="apes-select-selection__placeholder">
        {{ apesPlaceHolder }}
      </div>
      <ng-container *ngFor="let node of selectedNodes | slice: 0 : apesMaxTagCount; trackBy:trackValue">
        <li
          [@zoomMotion]
          [@.disabled]="noAnimation?.apesNoAnimation"
          [apesNoAnimation] = "noAnimation?.apesNoAnimation"
          [attr.title]="apesDisplayWith(node)"
          [class.apes-select-selection__choice__disabled]="node.isDisabled"
          class="apes-select-selection__choice">
               <span *ngIf="!node.isDisabled" class="apes-select-selection__choice__remove"
                     (mousedown)="$event.preventDefault()"
                     (click)="removeSelected(node, true, $event)">
                 <i apes-icon apesType="close" class="apes-select-remove-icon"></i>
               </span>
          <span class="apes-select-selection__choice__content">{{ apesDisplayWith(node) }}</span>
        </li>
      </ng-container>
      <li [@zoomMotion]
          *ngIf="selectedNodes.length > apesMaxTagCount"
          class="apes-select-selection__choice">
        <div class="apes-select-selection__choice__content">
          <ng-container *ngIf="apesMaxTagPlaceholder">
            <ng-template
              [ngTemplateOutlet]="apesMaxTagPlaceholder"
              [ngTemplateOutletContext]="{ $implicit: selectedNodes | slice: apesMaxTagCount}">
            </ng-template>
          </ng-container>
          <ng-container *ngIf="!apesMaxTagPlaceholder">
            + {{ selectedNodes.length - apesMaxTagCount }} ...
          </ng-container>
        </div>
      </li>
      <li class="apes-select-search apes-select-search--inline">
        <ng-template [ngTemplateOutlet]="inputTemplate"></ng-template>
      </li>
    </ul>
  </ng-container>
  <span *ngIf="apesAllowClear" class="apes-select-selection__clear"
        (mousedown)="$event.preventDefault()"
        (click)="onClearSelection($event)">
    <i apes-icon apesType="close-circle" class="apes-select-clear-icon" apesTheme="fill"></i>
  </span>
  <span *ngIf="!isMultiple" class="apes-select-arrow">
    <i apes-icon apesType="down" class="apes-select-arrow-icon"></i>
  </span>
</div>
